<template>
  <div class="lucky">
    <div class="Notice">
      <Notice style="height: 40px;"></Notice>
      <div class="bg">
        <div class="swiper" style="height: 160px;">
          <swiperlistthree v-bind:swiperlistData="swiperlistData"></swiperlistthree>
        </div>
        <ul class="tal_box">
          <li @click="get_dictChildList(index,item.id,item.sort)" :class="{'activ':getItem_index==index}" v-for="(item ,index) in getItem">
            <div><img v-if="getItem_index==index" :src="item.imageTwo" ><img v-else :src="item.image" ></div>
            <p>{{item.name}}</p>
          </li>
        </ul>
        <div class="Secondary_tal"><p v-for="(item,index) in dictChildList" @click="Secondary_tal(index,item.id)" :class="{'activ':Secondary_index==index}">{{item.name}}</p></div>
      </div>
      <div class="cent">
        <div class="luckyScreen">
          <div class="lS_tal_box">
            <div class="PriceRange">
              <input type="" name="" @input="getminp()" v-model="minPrice" id="" value="" placeholder="最低价"/>-<input type="" v-model="maxPrice" name="" id="" @input="getmxnp()" value="" placeholder="最高价"/>
              <div @click="get_Price()">搜索</div>
            </div>
            <div class="btnRange">
              <p @click="get_PriceSection(index)" v-for="(item,index) in PriceSectionList" :class="{'activ':PriceSectionListindex==index}">{{item}}</p>
            </div>
            <div class="PriceRanking" @click="get_sort()">
              <p v-if="sort=='ASC'"><img src="../assets/lucky_PriceRise.png" ><span>价格从低到高</span></p>
              <p v-else><img src="../assets/lucky_PriceDrop.png" ><span>价格从高到低</span></p>
            </div>
            <div class="NameSearch"><input @input="chengname()" v-model="name" type="text" name="" id="" value="" /><div @click="get_name()">搜索</div></div>
          </div>
          <div class="hbb-list">
              <ul>
                <li @click="get_open(item.id)" v-for="(item,index) in itemData" :key="index">
                  <div>
                    <div class="hbb-list-anmite"></div>
                    <!-- <div class="hbb-list-box"><img src="../assets/hbb-list-box.png" ></div> -->
                    <div class="hbb-list-item"><img :src="item.luckyBoxDetails[0].image" ></div>
                  </div>
                  <div>
                    <div>{{item.skinName}}</div>
                    <div><div><img src="../assets/money-icon.png" ></div><p>{{item.price}}</p></div>
                  </div>
                </li>
              </ul>
              <div v-if="listkey" style="font-size: 14px;color: #999999;">暂无内容</div>
          </div>
          <div @click="get_add()" class="addloding"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import swiperlistthree from '../components/swiper-list-three.vue'
  import Notice from '../components/notice.vue'
  export default {
    components:{
      swiperlistthree,
      Notice
    },
   data () {
      return {
        PriceSectionList:[
          '10-20',
          '20-30',
          '30-40',
          '40-50'
        ],
        PriceSectionListindex:null,
        swiperlistData:[],
        tal:0,
        Secondary:0,
        Secondary_index:null,
        getItem_index:0,
        getItem:[],
        dictChildList:[],
        itemData:[],
        pageNum:1,
        pageSize:12,
        maxPrice:null,
        minPrice:null,
        name:'',
        dictChildId:null,
        sort:'ASC',
        listkey:false
      }
    },
    methods: {
      getminp(e){
        this.PriceSectionListindex=null;
      },
      getmxnp(e){
        this.PriceSectionListindex=null;
      },
      Secondary_tal(e,id){
        this.itemData=[];
        this.Secondary = e;
        this.Secondary_index = e;
        this.dictChildId = id
        this.get_itemData();
      },
      get_open(id){
        this.$router.push({
                  path: `/openlicky/${id}`,
            })
      },
      get_itemData(){
        this.listkey = false;
        this.$api.get('/api/decoration/itemData',
        {
          dictChildId:this.dictChildId,
          skinItem:this.id,
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          maxPrice:this.maxPrice,
          minPrice:this.minPrice,
          sort:this.sort,
          name:this.name
        }
        , r => {
              if(r.code==200){
                this.loding = false;
                if (this.pageNum<=r.data.totalPages) {
                  this.itemData = this.itemData.concat( r.data.content );
                }
                if(r.data.content==0){
                  this.listkey = true;
                }
              }
          })
      },
      get_tal(){
          this.$api.get('/api/decoration/getItem',null, r => {
                if(r.code==200){
                  this.getItem = r.data;
                  this.id = r.data[0].id;
                  this.get_itemData();
                }
            })
      },
      get_dictChildList(e,id){
        this.name = '';
        this.Secondary_index=null;
        this.getItem_index = e;
        this.dictChildList = this.getItem[e].dictChildList;
        this.id = id;
        this.dictChildId=null;
        this.itemData=[];
        this.get_itemData();
      },
      get_Price(){
        var min =  this.minPrice;
        var max =  this.maxPrice;
        if (min>0 && max>min) {
          this.itemData=[];
          this.get_itemData();
        } else{
          if (min<=0) {
            this.$confirm({
                type:'提示',
                time:'1',
                msg:'请输入最低价格查询！',
            })
          } else if(min>=max){
            this.$confirm({
                type:'提示',
                time:'1',
                msg:'最高价错误！',
            })
          }
        }
      },
      get_PriceSection(e){
        if (this.PriceSectionListindex==e) {
          this.PriceSectionListindex = null
          this.minPrice = null;
          this.maxPrice = null;
        } else{
          this.PriceSectionListindex = e;
          switch(e) {
               case 0:
                  this.minPrice = 10;
                  this.maxPrice = 20;
                  break;
               case 1:
                  this.minPrice = 20;
                  this.maxPrice = 30;
                  break;
               case 2:
                  this.minPrice = 30;
                  this.maxPrice = 40;
                  break;
               default:
                  this.minPrice = 40;
                  this.maxPrice = 50;
          }
        }
        this.itemData=[];
        this.get_itemData();
      },
      get_sort(){
        this.itemData=[];
        var k = this.sort;
        if (k == 'ASC') {
          this.sort = 'DESC'
          this.get_itemData();
        } else{
          this.sort = 'ASC'
          this.get_itemData();
        }
      },
      chengname(){
        // console.log(this.name)
      },
      get_name(){
        if (this.name != '') {
          this.itemData=[];
          this.get_itemData();
        } else{
            this.$confirm({
                type:'提示',
                time:'1',
                msg:'请输入关键字',
            })
        }
      },
      get_add(){
         this.pageNum++;
         this.get_itemData();
      }
    },
    created() {
      this.get_tal();
    }
  }
</script>

<style scoped>
  .luckyScreen{
    padding-bottom: 50px;
    min-height: 800px;
  }
  .addloding{
   background-image: url(../assets/jzgd-icon.png);
   background-size: 100% 100%;
   width: 174px;
   height: 35px;
   margin: 0 auto;
   cursor: pointer;
  }
  .hbb-list-anmite{
    background-image:url(../assets/hbb-list-bg.png);
    background-repeat: no-repeat;
    background-position: 30px 30px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
  .hbb-list ul li:hover .hbb-list-anmite{
     background-image:url(../assets/hbb-list-bgac.png);
     background-position: 5px 5px;
     transform: rotate(90deg);
     transition:all .5s ease-out;
  }
  .hbb-list ul li:hover .hbb-list-item{
   /* background-position: 5px 5px;
     margin-top: -40px; */
    top: 40%;
    left: 50%;
    transition: 0.5s;
    transform: translate(-50%, 0%) rotate(-5deg);
  }
  .hbb-list-item{
    position: absolute;
    z-index: 9;
    max-width: 140px;
    max-height: 140px;
    width: auto ;
    height: auto;
    top: 50%;
    left: 50%;
    transition:all 0.5s;
    transform: translate(-50%, -50%);
  }
  .hbb-list-item img{
    position: absolute;
    max-width: 140px;
    max-height: 140px;
    width: auto ;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .hbb-list-box{
    position: absolute;
    width: 146px;
    height: 146px;
    top: 50%;
    margin-top: -60px;
    left: 50%;
    margin-left: -70px;
    z-index: 6;
  }
  .hbb-list-box img{
    position: absolute;
    max-width: 146px;
    max-height: 146px;
    width: auto ;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .hbb-cent-hedar{
    width: 1200px;
    margin: 0 auto;
    background-color: #242C40;
  }
  .hbb-list{
    width: 1200px;
    margin: 0 auto;
    padding: 32px 30px;
    box-sizing: border-box;
    min-height: 700px;
  }
  .hbb-list ul{
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    padding-bottom: 30px;
  }
  .hbb-list ul li{
    /* margin-bottom: 50px; */
    margin-right: 6px;
    cursor: pointer;
  }
  .hbb-list ul li:nth-child(4n){
    margin-right: 0px;
  }
  .hbb-list ul li>div:first-child{
    width: 280px;
    height: 280px;
    position: relative;
  }

  .hbb-list ul li>div:last-child{
    margin:0 auto;
    width:260px ;
  }
  .hbb-list ul li>div:last-child>div:first-child{
    width: 170px;
    height: 43px;
    /* background-image: url(../assets/hbb-btn-bgs.png);
    background-size: 100% 100%; */
    color:#A8ECF9;
    margin:  0 auto;
    line-height: 43px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* .hbb-list ul li:hover>div:last-child>div:first-child{
    background-image: url(../assets/hbb-btn-bg.png);
  } */
  .hbb-list ul li>div:last-child>div:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    font-size: 16px;
    color: #FFA32A;
  }
  .hbb-list ul li>div:last-child>div:last-child p{
    margin-left: 5px;
  }

  .lS_tal_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
  }
  .PriceRange{
    width: 340px;
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;
    background-color: #2C3341;
    padding-left: 50px;
    color: #939CAB;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .PriceRange input{
    height: 36px;
    line-height: 36px;
    width: 70px;
    background-color: #2C3341;
    border: none;
    text-align: center;
    outline: none;
    font-size: 16px;
    color: #939CAB;
  }
  .PriceRange div{
    width: 96px;
    height: 36px;
    line-height: 36px;
    color: #2C3341;
    background-color: #E59328;
    cursor: pointer;
  }
  .btnRange{
    display: flex;
    align-items: center;
  }
  .btnRange>p{
    height: 36px;
    line-height: 36px;
    border-radius: 20px;
    border:2px solid  #2C3341;
    color: #6A7F9F;
    font-size: 16px;
    width: 75px;
    margin-right: 15px;
    cursor: pointer;
  }
  .btnRange>.activ{
    border:2px solid  #6A7F9F;
    color: #D5E6FF;
  }
  .PriceRanking{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #70C8FB;
    line-height: 18px;
    cursor: pointer;
  }
  .PriceRanking img{
    width: 21px;
    height: 15px;
  }
  .NameSearch{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 30px;
    background-color: #2C3341;
  }
  .NameSearch input{
    height: 36px;
    line-height: 36px;
    width: 150px;
    background-color: #2C3341;
    border: none;
    text-align: center;
    outline: none;
    font-size: 16px;
    color: #939CAB;
    margin-right: 30px;
  }
  .NameSearch div{
    width: 96px;
    height: 36px;
    line-height: 36px;
    color: #2C3341;
    background-color: #E59328;
    cursor: pointer;
  }
  .lucky{
    background-color: rgba(18,21,27);
    max-width: 2600px;
    margin: 0 auto;
  }
.cent{
  margin: 0 auto;
  width: 1200px;
}
.tal_box{
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding: 35px 0 10px;
  width: 1200px;
  margin: 0 auto;
}
.tal_box::-webkit-scrollbar { width: 0 !important }
.tal_box li{
  width: 142px;
  height: 142px;
  color: #70C8FB;
  font-size: 16px;
  margin-right: 10px;
  border: 2px solid #1E72AE;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(0deg, #0D3553, rgba(15, 18, 30, 0));
  cursor: pointer;
}
.tal_box li:hover{
  transition: all .5s;
  opacity: .65;
}
.tal_box .activ:hover{
  opacity: 1;
}
.tal_box li>div{
  width: 100%;
  height: 98px;
  position: relative;
}
.tal_box li>div img{
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 140px;
  max-height: 96px;
  transform: translate(-50%,-50%);
}
.tal_box li>p{
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;

}
.tal_box .activ p{
  background-color: #1E72AE;
  color: #FFFFFF;
}
.bg{
  background: radial-gradient(#0D3553,#0F121E );
  width: 100%;
  min-height:438px ;
}
.Secondary_tal{
    display: flex;
    width: 100%;
    width: 1200px;
    padding-bottom: 10px;
    margin: 0 auto;
    height: 50px;
}
.Secondary_tal::-webkit-scrollbar { width: 0 !important }
.Secondary_tal p{
  height: 34px;
  line-height: 34px;
  border-radius: 18px;
  padding:  0 15px;
  color: #557EA9;
  border:  2px solid #154266;
  margin-right: 20px;
  cursor: pointer;
}
.Secondary_tal .activ{
  color: #1E72AE !important;
  border:  2px solid #1E72AE !important;
}
</style>
